<template>
  <el-dialog
    v-model="visible"
    :title="isEdit ? '编辑同步配置' : '新增同步配置'"
    width="600px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="配置名称" prop="configName">
        <el-input v-model="formData.configName" placeholder="请输入配置名称" />
      </el-form-item>

      <el-form-item label="同步类型" prop="syncType">
        <el-select v-model="formData.syncType" placeholder="请选择同步类型">
          <el-option label="工作流" value="WORKFLOW" />
          <el-option label="任务" value="TASK" />
          <el-option label="实例" value="INSTANCE" />
        </el-select>
      </el-form-item>

      <el-form-item label="同步模式" prop="syncMode">
        <el-radio-group v-model="formData.syncMode">
          <el-radio label="AUTO">自动</el-radio>
          <el-radio label="MANUAL">手动</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="formData.syncMode === 'AUTO'" label="同步间隔(秒)" prop="syncInterval">
        <el-input-number
          v-model="formData.syncInterval"
          :min="10"
          :max="3600"
          placeholder="请输入同步间隔"
        />
      </el-form-item>

      <el-form-item label="是否启用" prop="enabled">
        <el-switch
          v-model="formData.enabled"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { createSyncConfig, updateSyncConfig, type DsSyncConfig } from '@/service/api/dataplatform/ds-sync';

interface Props {
  visible: boolean;
  configData?: DsSyncConfig | null;
}

interface Emits {
  (e: 'update:visible', visible: boolean): void;
  (e: 'success'): void;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  configData: null
});

const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();
const loading = ref(false);

const formData = reactive<DsSyncConfig>({
  configName: '',
  syncType: 'WORKFLOW',
  syncMode: 'AUTO',
  syncInterval: 60,
  enabled: 1,
  remark: ''
});

const rules: FormRules = {
  configName: [
    { required: true, message: '请输入配置名称', trigger: 'blur' }
  ],
  syncType: [
    { required: true, message: '请选择同步类型', trigger: 'change' }
  ],
  syncMode: [
    { required: true, message: '请选择同步模式', trigger: 'change' }
  ],
  syncInterval: [
    { required: true, message: '请输入同步间隔', trigger: 'blur' }
  ],
  enabled: [
    { required: true, message: '请选择是否启用', trigger: 'change' }
  ]
};

const isEdit = computed(() => !!props.configData?.id);

watch(
  () => props.visible,
  (val) => {
    if (val && props.configData) {
      Object.assign(formData, props.configData);
    } else if (val) {
      resetForm();
    }
  }
);

function resetForm() {
  formData.configName = '';
  formData.syncType = 'WORKFLOW';
  formData.syncMode = 'AUTO';
  formData.syncInterval = 60;
  formData.enabled = 1;
  formData.remark = '';
  formRef.value?.clearValidate();
}

function handleClose() {
  emit('update:visible', false);
}

async function handleSubmit() {
  try {
    await formRef.value?.validate();
    loading.value = true;

    if (isEdit.value) {
      await updateSyncConfig(formData);
      ElMessage.success('更新成功');
    } else {
      await createSyncConfig(formData);
      ElMessage.success('创建成功');
    }

    emit('success');
    handleClose();
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    loading.value = false;
  }
}
</script>
